<template>
  <div style="width: 85vw; height: 85vh; overflow: hidden; display: flex">
    <div style="flex: 1">
      <el-image style="width: 100%; height: 100%" src="http://www.zuef.zju.edu.cn/ueditor/php/upload/image/20221010/1665379219742024.jpg"></el-image>
    </div>
    <div style="width: 35%; height: 100%; background-color: white; display: flex">
      <div style="text-align: center; margin: 0 20px">
        <div style="margin-top: 150px">
          <div style="font-size: 25px">注册</div>
          <div style="font-size: 14px; color: gray; margin-top: 10px">
            请输入邮箱、用户名和密码进行注册
          </div>
        </div>
        <div style="margin-top: 40px">
          <el-form :model="userSignInfo" :rules="inputRules" ref="userSignForm">
            <el-form-item prop="email">
              <el-input
                    placeholder="邮箱"
                    v-model="userSignInfo.email"
                    style="margin-bottom: 10px"
                    clearable>
                <template #prefix>
                  <el-icon><Iphone /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="account">
              <el-input type="text"
                    placeholder="用户名"
                    v-model="userSignInfo.account"
                    maxlength="20"
                    minlength="6"
                    clearable>
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="text"
                    placeholder="密码"
                    style="margin-top: 10px"
                    v-model="userSignInfo.password"
                    maxlength="20"
                    minlength="6"
                    clearable>
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-top: 30px">
          <el-button @click="userSignIn" style="width: 90%" type="success" plain>立即注册</el-button>
        </div>
        <div>
          <el-button @click="jumpToLogin" style="width: 90%; margin-top: 20px" type="warning" plain>登录界面</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      userSignInfo: {
        email: "",
        account: "",
        password: "",
      },
      inputRules: {
        email: [
          { required: true, message: "请输入正确邮箱", trigger: ['blur', 'clear'] },
          { validator: this.checkEmail, trigger: ['blur', 'clear'] }
        ],
        account: [
            { required: true, message: "账号长度在6-20之间", trigger: ['blur', 'clear'] },
            { validator: this.checkAccount, trigger: ['blur', 'clear'] }
        ],
        password: [
            { required: true, message: "密码长度在6-20之间", trigger: ['blur', 'clear'] },
            { validator: this.checkPassword, trigger: ['blur', 'clear'] }
        ]
      }
    }
  },
  computed: {

  },
  methods: {
    // 邮箱校验功能
    checkEmail(rule, value, callback) {
      if (!value) {
        return callback(new Error('邮箱不能为空'));
      }
      const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,6}$/;
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的邮箱'));
      } else {
        return callback();  // 成功校验
      }
    },
    // 账号校验
    checkAccount(rule, value, callback) {
      if (!value) {
        return callback(new Error('账号不能为空'));
      }
      if (value.length < 6) {
        return callback(new Error('账号长度过短'));
      }
      if (value.length > 20) {
        return callback(new Error('账号长度过长'));
      }
    },
    // 密码校验
    checkPassword(rule, value, callback) {
      if (!value) {
        return callback(new Error('密码不能为空'));
      }
      if (value.length < 6) {
        return callback(new Error('密码长度过短'));
      }
      if (value.length > 20) {
        return callback(new Error('密码长度过长'));
      }
    },
    userSignIn() {
      axios.post('/user/signin/',
          {
            email: this.userSignInfo.email,
            account: this.userSignInfo.account,
            password: this.userSignInfo.password,
          })
          .then(response => {
            ElMessage.success("注册成功")
            window.location.href = "/login"
          }).catch(error => {
            ElMessage.error("注册失败，账号或邮箱已存在")
            console.log(error)
      })
    },
    jumpToLogin() {
      window.location.href = "/login"
    }
  },
}

</script>

<style scoped>

</style>